<template>
  <li :class="{ active: activeComponent === component.id }" @click="selectComponent(component.id)">
    {{ component.name }}
    <ul v-if="component.children">
      <tree-item v-for="child in component.children" :key="child.id" :component="child" :active-component="activeComponent" @select-component="selectComponent" />
    </ul>
  </li>
</template>

<script setup>
const props = defineProps({
  component: {
    type: Object,
    required: true
  },
  activeComponent: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['select-component']);

const selectComponent = (id) => {
  emit('select-component', id);
};
</script>

<style scoped>
li {
  list-style: none;
  padding: 10px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  border-radius: 4px;
  color: #555;
}

li:hover {
  background-color: #e6f7e6;
}

li.active {
  background-color: #e6f7e6;
  color: #2e7d32;
  font-weight: bold;
}

ul {
  padding-left: 20px;
}
</style>